<template>
  <div style="height: 100%" @click="findTagName()" v-loading="loading">
    <div
      id="viewZoomNumber"
      class="tool-bar2"
      style="
        position: absolute;
        left: 10px;
        bottom: 140px;
        color: #266EFF;
        line-height: 25px;
        z-index: 1111;
      "
    >
      {{ viewZoomNumber }}
    </div>
    <div class="tool-copy">
      <div
        class="tool-bar2-copy"
        :class="{ red: changeColor == 9 }"
        title="测距工具"
        @click="toggleMeasureDistance"
      >
        <font-awesome-icon :icon="['fas', 'ruler']" />测距
      </div>
      <div
        class="tool-bar2-copy"
        :class="{ red: changeColor == 10 }"
        title="周长、面积测量工具"
        @click="toggleMeasureArea"
      >
        <font-awesome-icon :icon="['fas', 'square']" />测面积
      </div>
      <div
        class="tool-bar2-copy"
        :class="{ red: changeColor == 5 }"
        title="画笔标注"
        @click="togglePencil"
      >
        <font-awesome-icon :icon="['fas', 'pencil-alt']" />画笔
      </div>
      <div
        class="tool-bar2-copy"
        :class="{ red: changeColor == 12 }"
        title="智能预测"
        @click="drawerAi()"
      >
        <i class="el-icon-user-solid" size="large"></i>AI
      </div>
      <div
        class="tool-bar2-copy"
        :class="{ red: changeColor == 24 }"
        title="报告"
        @click="watchDetail()"
      >
        <span class="tool-icon ai-icon">报告</span>
      </div>
      <div
        class="tool-bar2-copy"
        :class="{ red: changeColor == 13 }"
        @click="screenshot()"
        title="截图"
      >
        <font-awesome-icon :icon="['fas', 'crop']" />截图
      </div>
      <div class="tool-bar2-copy" :class="{ red: changeColor == 17 }" title="复位" @click="goHome">
        <i class="el-icon-refresh-left" size="large"></i>复位
      </div>
      <div
        class="tool-bar2-copy"
        :class="{ red: changeColor == 15 }"
        @click="sreenFull()"
        title="窗口全屏"
      >
        <i class="el-icon-full-screen" size="large"></i>全屏
      </div>
    </div>
    <div class="overlay" v-show="userLogin">
      <div class="cut-line"></div>
      <div class="tool-bar3" :class="{ red: changeColor == 2 }" title="任务列表">
        <font-awesome-icon :icon="['fas', 'user-friends']" size="lg" @click="patienterListMethod" />
      </div>
      <div class="tool-bar3">
        <div
          style="margin-right: 3px"
          :class="{ red: changeColor == 1 }"
          title="上一个病人"
          @click="diagnosisLast()"
        >
          <font-awesome-icon :icon="['fas', 'angle-left']" size="lg" />
        </div>
        <div
          style="margin-left: 3px"
          :class="{ red: changeColor == 3 }"
          title="下一个病人"
          @click="diagnosisNext()"
        >
          <font-awesome-icon :icon="['fas', 'angle-right']" size="lg" />
        </div>
      </div>

      <div class="tool-bar1" :class="{ red: changeColor == 4 }" title="诊断详情">
        <font-awesome-icon :icon="['fas', 'file-alt']" size="lg" @click="patienterDetailMethod" />
      </div>
      <!-- <div class="tool-bar1" :class="{ red: changeColor == 8 }" title="隐藏标注">
        <font-awesome-icon
          :icon="['fas', 'eye-slash']"
          size="lg"
          @click="hideCallout"
          v-if="this.ifhideCallout"
        />
        <font-awesome-icon
          :icon="['fas', 'eye']"
          v-if="!this.ifhideCallout"
          size="lg"
          @click="hideCallout"
        />
      </div> -->
      <div class="cut-line"></div>
      <div
        class="tool-bar1"
        style="font-size: 20px"
        :class="{ red: changeColor == 13 }"
        @click="pictureToolPanelShow(1)"
        title="切片工具"
      >
        <i class="el-icon-menu" size="large"></i>
      </div>
      <div
        class="tool-bar1"
        style="font-size: 20px"
        :class="{ red: changeColor == 13 }"
        @click="pictureToolPanelShow(2)"
        title="画笔工具"
      >
        <i class="el-icon-edit-outline"></i>
      </div>

      <div
        class="tool-bar1"
        style="font-size: 20px"
        :class="{ red: changeColor == 14 }"
        @click="pictureToolPanelShow(3)"
        title="色彩工具"
      >
        <i class="el-icon-picture-outline-round"></i>
      </div>

      <div
        class="tool-bar1"
        style="font-size: 20px"
        :class="{ red: changeColor == 14 }"
        @click="pictureToolPanelShow(4)"
        title="设置"
      >
        <i class="el-icon-setting"></i>
      </div>
      <div class="cut-line"></div>
      <!--            <div class="tool-bar1" :class="{ red:changeColor == 12}"-->
      <!--                 title="智能预测" @click="drawerAi()">-->
      <!--                <span class="tool-icon ai-icon">AI</span>-->
      <!--            </div>-->
      <!-- <div class="tool-bar1" :class="{ red:changeColor == 20}" title="智能分析"  @click="analysisAI()">
                <div class="keyword" style="margin-left: 20px;">F4</div>
                <font-awesome-icon :icon="['fas', 'brain']"  size="lg"/>
            </div> -->

      <!-- <div class="tool-bar1" :class="{ red:changeColor == 14}"
            title="切片重扫">
                <font-awesome-icon :icon="['fas', 'wrench']"  size="lg" />
            </div> -->
      <!--<p id="predictAI" class="predictAI"></p>-->

      <div
        class="tool-bar1"
        :class="{ red: changeColor == 15 }"
        style="font-size: 20px"
        @click="sreenFull()"
        title="窗口全屏"
      >
        <i class="el-icon-full-screen" size="large"></i>
      </div>
      <div
        class="tool-bar1"
        :class="{ red: changeColor == 25 }"
        style="font-size: 20px"
        @click="switchLabel()"
        title="病理标签"
      >
        <i class="el-icon-picture-outline" size="large"></i>
      </div>

      <div class="cut-line" style="float: right"></div>
      <div
        class="tool-bar1"
        style="font-size: 20px"
        @click="annotationSwitchButton"
        :class="{ red: changeColor24 == 24 }"
        title="标注直接保存"
      >
        <i class="el-icon-document-add" size="large"></i>
      </div>
    </div>
    <div class="divCoordinateColor" v-if="isColorPanelShow">
      <div class="block">
        <el-row>
          <el-col :span="6" style="padding-top: 8px"
            ><span style="padding-top: 2px; padding-left: 2px;color: #fff;">对比度</span></el-col
          >
          <el-col :span="18">
            <el-slider
              v-model="coordinateColor.contrast"
              @input="onContrastSlideChange"
            ></el-slider>
          </el-col>
        </el-row>
      </div>
      <div class="block">
        <el-row>
          <el-col :span="6" style="padding-top: 8px;color: #fff;"
            ><span class="demonstration">亮度</span></el-col
          >
          <el-col :span="18">
            <el-slider v-model="coordinateColor.light" @input="onLightSlideInput"></el-slider>
          </el-col>
        </el-row>
      </div>
      <div class="block">
        <el-row>
          <el-col :span="6" style="padding-top: 8px;color: #fff;"
            ><span class="demonstration">Gama</span></el-col
          >
          <el-col :span="18">
            <el-slider v-model="coordinateColor.gama" @input="onGamaSlideInput"></el-slider>
          </el-col>
        </el-row>
      </div>
      <!--            <div class="block">-->
      <!--                <el-row>-->
      <!--                    <el-col :span="6" style="padding-top:8px"><span class="demonstration">红</span></el-col>-->
      <!--                    <el-col :span="18">-->
      <!--                        <el-slider v-model="coordinateColor.red"></el-slider>-->
      <!--                    </el-col>-->
      <!--                </el-row>-->
      <!--            </div>-->
      <!--            <div class="block">-->
      <!--                <el-row>-->
      <!--                    <el-col :span="6" style="padding-top:8px"><span class="demonstration">黄</span></el-col>-->
      <!--                    <el-col :span="18">-->
      <!--                        <el-slider v-model="coordinateColor.yellow"></el-slider>-->
      <!--                    </el-col>-->
      <!--                </el-row>-->
      <!--            </div>-->
      <!--            <div class="block">-->
      <!--                <el-row>-->
      <!--                    <el-col :span="6" style="padding-top:8px"><span class="demonstration">蓝</span></el-col>-->
      <!--                    <el-col :span="18">-->
      <!--                        <el-slider v-model="coordinateColor.blue"></el-slider>-->
      <!--                    </el-col>-->
      <!--                </el-row>-->
      <!--            </div>-->
    </div>

    <div class="divPictureHandle" v-if="isSlicePanelShow">
      <div class="tool-bar2" :class="{ red: changeColor == 18 }" title="右旋">
        <font-awesome-icon @click="rotateRight" :icon="['fas', 'redo']" size="lg" />
      </div>
      <!-- <div class="tool-bar-degree" style="width: 40px">
                <el-input size="mini" v-model.number="viewerAngleCopy"></el-input>
            </div> -->
      <div class="tool-bar2" :class="{ red: changeColor == 19 }" title="左旋">
        <font-awesome-icon @click="rotateLeft" :icon="['fas', 'undo']" size="lg" />
      </div>
      <div class="tool-bar2" :class="{ red: changeColor == 13 }" @click="screenshot()" title="截图">
        <font-awesome-icon :icon="['fas', 'crop']" size="lg" />
      </div>
      <div
        class="tool-bar2"
        :class="{ red: changeColor == 16 }"
        data-toggle="modal"
        data-target="#myModal"
        @click="hotkeyMethods"
        title="快捷键"
      >
        <font-awesome-icon :icon="['fas', 'keyboard']" size="lg" />
      </div>
      <div class="tool-bar2" :class="{ red: changeColor == 9 }" title="测距工具">
        <font-awesome-icon :icon="['fas', 'ruler']" size="lg" @click="toggleMeasureDistance" />
      </div>
      <div class="tool-bar2" :class="{ red: changeColor == 10 }" title="周长、面积测量工具">
        <font-awesome-icon :icon="['fas', 'square']" size="lg" @click="toggleMeasureArea" />
      </div>
      <!-- <div
                id="viewZoomNumber"
                class="tool-bar1"
                style="padding-left: 3px; font-size: small"
            >
                {{ viewZoomNumber }}
            </div> -->
      <div class="tool-bar2" :class="{ red: changeColor == 17 }" title="重置">
        <font-awesome-icon @click="goHome" :icon="['fas', 'globe-asia']" size="lg" />
      </div>
    </div>
    <div class="divMarkLabelHandle" v-if="isPencilPanelShow">
      <div class="tool-bar2" :class="{ red: changeColor == 5 }" title="画笔标注">
        <font-awesome-icon :icon="['fas', 'pencil-alt']" size="lg" @click="togglePencil" />
      </div>
      <div class="tool-bar2" :class="{ red: changeColor == 6 }" title="矩形标注">
        <font-awesome-icon :icon="['fas', 'vector-square']" size="lg" @click="toggleRectangle" />
      </div>
      <div class="tool-bar2" :class="{ red: changeColor == 7 }" title="多边形标注">
        <font-awesome-icon :icon="['fas', 'draw-polygon']" size="lg" @click="togglePolygon" />
      </div>
      <div
        class="tool-bar2"
        style="font-size: 25px"
        :class="{ red: changeColor == 21 }"
        @click="toggleCircle"
        title="圆形标注"
      >
        <i class="el-icon-aim" size="large"></i>
      </div>
      <div
        class="tool-bar2"
        style="font-size: 25px"
        :class="{ red: changeColor == 22 }"
        @click="togglePencilLine"
        title="涂抹标注"
      >
        <i class="el-icon-edit" size="large"></i>
      </div>

      <div
        class="tool-bar2"
        style="font-size: 25px"
        :class="{ red: changeColor == 23 }"
        @click="toggleArrow"
        title="箭头"
      >
        <i class="el-icon-top-right" size="large"></i>
      </div>

      <div class="tool-bar2" :class="{ red: changeColor == 11 }" title="清除">
        <font-awesome-icon :icon="['fas', 'brush']" size="lg" @click="clearMeasure" />
      </div>
    </div>
    <div class="divSettingSwitch" v-if="isSwitchPanelShow">
      <el-switch
        style="margin: 5px"
        v-model="switchValue.scale"
        active-text="比例尺"
        inactive-text=""
      >
      </el-switch>
      <el-switch style="margin: 5px" v-model="switchValue.zoom" active-text="缩放" inactive-text="">
      </el-switch>
      <el-switch style="margin: 5px" v-model="switchValue.disc" active-text="播放" inactive-text="">
      </el-switch>
      <el-switch
        style="margin: 5px"
        v-model="switchValue.markLabel"
        active-text="标注"
        inactive-text=""
      >
      </el-switch>
      <el-switch
        style="margin: 5px"
        v-model="switchValue.AIAnalysis"
        active-text="AI分析"
        inactive-text=""
      >
      </el-switch>
      <el-switch
        style="margin: 5px"
        v-model="switchValue.patientId"
        active-text="病理号"
        inactive-text=""
      >
      </el-switch>
      <el-switch style="margin: 5px" v-model="switchValue.net" active-text="网格" inactive-text="">
      </el-switch>
      <!--            <el-switch style="margin:5px"-->
      <!--                       v-model="switchValue.navigator"-->
      <!--                       active-text="导航"-->
      <!--                       inactive-text="">-->
      <!--            </el-switch>-->
    </div>
    <div class="openSeadragon">
      <open-seadragon
        :key="newTimer"
        v-if="openseadragonIsShow"
        v-show="ifOpenseadragon"
        ref="openseadragon"
        :dzi-url="dziUrl"
        :pixelsPerMeter="1992428.7706714484"
        @annotation-drawing-end="annotationDrawingEnd"
        @uploadAnnotation="uploadAnnotation"
        :annotationsData="annotationsDataInit"
        :AiAnnotationsData="aiAnnotationsData"
        :info="info"
        :tiles="tiles"
        :type="sourceType"
        :imageInfo="imageInfo"
        @ai-annotation-drawing-end="aiAnnotationDrawingEnd"
        @view-zoom="viewZoom"
      >
      </open-seadragon>
    </div>
    <div>
      <el-dialog
        title="任务列表"
        :visible.sync="patienterList"
        @closed="DiagnosisListclosed"
        width="80%"
      >
        <DiagnosisList> </DiagnosisList>
      </el-dialog>
      <el-dialog
        title="诊断详情"
        :visible.sync="patienterDetail"
        :key="ordersId"
        width="80%"
        @closed="patienterDetailclosed"
      >
        <ConsultationDetail></ConsultationDetail>
      </el-dialog>
      <el-dialog title="标注提示" :visible.sync="annotationsWarn" :show-close="false" width="20%">
        <el-form label-width="80px">
          <el-form-item label="提示内容" style="margin-bottom: 10px">
            <el-input v-model="warning" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="备注内容">
            <el-input v-model="remark" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Submit" size="mini">确定</el-button>
            <el-button @click="annotationsWarnCancel" size="mini">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="快捷键说明" @closed="hotkeyclosed" :visible.sync="hotkey" width="50%">
        <HotKey></HotKey>
      </el-dialog>
      <div v-if="annDialogVisible" class="updateInfo">
        <el-form style="padding: 3px">
          <el-form-item class="formLableColor" label="标注提示:">
            <el-input v-model="warning" size="mini"></el-input>
          </el-form-item>
          <el-form-item class="formLableColor" label="备注内容:">
            <el-input v-model="remark" size="mini"></el-input>
          </el-form-item>
          <el-form-item class="formLableColor" label="面积:">
            <span>{{ updateAnnInfo.area }}μm²</span>
          </el-form-item>
          <el-form-item class="formLableColor" label="长:">
            <span>{{ updateAnnInfo.width }}μm</span>
          </el-form-item>
          <el-form-item class="formLableColor" label="宽:">
            <span>{{ updateAnnInfo.height }}μm</span>
          </el-form-item>
          <el-form-item class="formLableColor" label="标注人:">
            <span>{{ updateAnnInfo.saveUserName }}</span>
          </el-form-item>
          <el-form-item class="formLableColor" label="时间:">
            <span>{{ updateAnnInfo.createAt }}</span>
          </el-form-item>
        </el-form>
        <div slot="footer" style="float: right" class="dialog-footer">
          <el-button size="mini" @click="annDialogVisible = false">取 消</el-button>
          <el-button type="primary" size="mini" @click="updateAnnSubmit(updateAnnInfo.annotationId)"
            >确 定</el-button
          >
        </div>
      </div>
      <AIFloating v-if="drawer" @jumpTo="jumpTo" :AIdata="AIdata"> </AIFloating>
      <Analysis v-if="Ifanalysis"></Analysis>
      <div class="dialog" v-if="annotationsData.length > 0 && switchValue.markLabel">
        <ul>
          <template v-for="(data, index) in annotationsData">
            <li @mouseover="selectStyle(data)" :key="index" @mouseout="outStyle(data)">
              <div style="position: relative; height: 100px">
                <img class="liImg" v-bind:src="data.imageUrl" @click="updateAnnotation(data)" />
                <img
                  src="/images/cancel.png"
                  @click="deleteAnnotation(data.annotationId)"
                  style="position: absolute; right: 10px; width: 10px; cursor: pointer"
                />
                <span class="annPicUserName"> {{ data.saveUserName }}</span>
              </div>
              <div :class="{ active: data.active }" v-show="data.active">
                <el-form style="padding: 3px">
                  <el-form-item class="formLableColor" label="标注提示:">
                    <span>{{ data.remarkOne }}</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="备注内容:">
                    <span>{{ data.remarkTwo }}</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="面积:">
                    <span>{{ data.areaInfo.area }}μm²</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="长:">
                    <span>{{ data.areaInfo.width }}μm</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="宽:">
                    <span>{{ data.areaInfo.height }}μm</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="标注人:">
                    <span>{{ data.saveUserName }}</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="时间:">
                    <span>{{ data.createAt }}</span>
                  </el-form-item>
                </el-form>
              </div>
            </li>
          </template>
        </ul>
      </div>
      <div
        class="leftPic"
        @mouseover="mouseover"
        @mouseout="mouseout"
        :style="styleObjectClass"
        v-if="showleftPic"
      >
        <div :key="index" v-for="(data, index) in biopsyList" style="position: relative">
          <img
            v-bind:src="pathologyServiceURL + data.previewUrl"
            :class="isActive == index ? 'yesActive' : 'noActive'"
            @click="
              getAnnotations(data.id, data.newFilename, data.originFilename, data.labelUrl, index)
            "
          />
          <div
            :class="[
              data.pred == '0' ? 'greenStatus' : data.pred == '1' ? 'redStatus' : 'greyStatus'
            ]"
            class="colorStatus"
          ></div>
        </div>
      </div>
      <div
        class="rightLable"
        ref="IMAGE_SERVICE"
        @click="imagePinwheel($event)"
        v-show="switchValue.patientId"
      >
        <img
          class="right-lable-img"
          title="鼠标左键点击可顺时针旋转90度"
          v-bind:src="pathologyServiceURL + labelUrl"
        />
      </div>
    </div>
    <!-- 截图 -->
    <canvas id="drawRectCanvas"></canvas>
    <canvas id="shadeCanvas"></canvas>
    <div id="prescription" style="display: none; background: white">
      <!--倍率框-->
      <div id="rate" style="text-align: left; width: 100%"></div>
      <!--可输入框-->
      <div
        id="SCinputBox"
        style="
          text-align: center;
          width: 100%;
          word-break: break-all;
          word-wrap: break-word;
          background: white;
        "
        contenteditable="true"
        placeholder="请输入描述内容"
      ></div>
      <!--时间框-->
      <div id="screenshotTime" style="text-align: right; width: 100%"></div>
    </div>
    <div id="canvasToolbar">
      <div class="canvasButton" title="退出截图" id="cancel" @click="sCancel">
        <font-awesome-icon :icon="['fas', 'power-off']" size="lg" />
      </div>
      <div class="canvasButton" title="完成截图" id="success" @click="sSuccess">
        <font-awesome-icon :icon="['fas', 'check']" size="lg" />
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import _ from 'lodash'
import $ from 'jquery'
import ConsultationDetail from '@/templates/components/ConsultationTab'
import jcanvasFactory from '../Viewer/jcanvas'
import html2canvas from '../Viewer/html2canvas'
import OpenSeadragon from '../components/OpenSeadragon/OpenSeadragon'
import DiagnosisList from '../Viewer/ViewerDiagnosisList'
import AIFloating from '../Viewer/AIFloating'
import HotKey from '../Viewer/Hotkey'
import Analysis from '../Viewer/Analysis'

// import Client from '../../server/client';

export default {
  components: {
    OpenSeadragon,
    DiagnosisList,
    ConsultationDetail,
    AIFloating,
    HotKey,
    Analysis
  },
  data() {
    return {
      dziUrl: this.pathologyServiceURL + this.$route.query.dzi,
      newTimer: '',
      openseadragonIsShow: false,
      tiles: [
        {
          scaleFactors: [1, 4, 16],
          width: 440,
          height: 540
        }
      ],
      sourceType: 'DZI',
      imageInfo: {
        width: 21120,
        height: 77760,
        maxLevel: 0,
        curScale: 0
      },
      currentSuspicious: {}, //当前可疑点
      userLogin: true,
      annotationSwitchStatus: false,
      switchValue: {
        scale: true,
        zoom: true,
        disc: true,
        markLabel: true,
        AIAnalysis: true,
        patientId: true,
        navigator: true,
        net: false
      },
      isSlicePanelShow: false,
      isPencilPanelShow: false,
      isColorPanelShow: false,
      isSwitchPanelShow: false,
      coordinateColor: {
        red: 50,
        blue: 50,
        gama: 100,
        yellow: 50,
        contrast: 100,
        light: 50
      },
      //传给组件diagnosisdetail组件的值，快捷键调出子组件对应的tab-item
      activeTabItem: 'tabBase',
      // 左侧切片图片样式
      styleObject: {
        cursor: 'pointer',
        position: 'relative',
        isDisplay: 'inline',
        width: '200px',
        left: '-100px'
      },
      styleObjectClass: {
        transform: 'translateX(-50%)'
      },
      biopsyList: [],
      biopsyId: this.$route.query.biopsyId,
      biopsyOriginFilename: this.$route.query.originFilename,
      labelUrl: '',
      annotationsDataInit: [],
      ifhideCallout: false,
      active: false,
      // 标注提示
      warning: '',
      remark: '',
      annotationsWarn: false,
      newannotations: [],
      newPic: null,
      // 组件AI数据
      AIdata: null,
      drawer: false,
      Ifanalysis: false,
      changeColor: -1,
      changeColor24: -1,
      hotkey: false,
      patienterList: false,
      patienterDetail: false,
      pathologyServiceURL: process.env.VUE_APP_pathologyServiceURL,
      ImageServiceURL: process.env.VUE_APP_ImageServiceURL,
      info: '病人信息',
      aiAnnotationsData: [],
      annotationsData: [],
      pencilActive: false,
      polygonActive: false,
      rectangleActive: false,
      measureDistanceActive: false,
      measureAreaActive: false,
      flag: true,
      timer: null,
      timerOne: null,
      viewerAngle: 0,
      viewerAngleCopy: 90,
      viewZoomNumber: 1,
      annDialogVisible: false,

      diagnosisIdMock: 0,
      updateAnnInfo: {
        annotationId: '',
        width: '',
        height: '',
        saveUserName: '',
        createAt: '',
        area: ''
      },
      showleftPic: true,
      diagnosisId: null,
      loading: false,
      prevPathologyId: null,
      nextPathologyId: null,
      ifOpenseadragon: true,
      ordersId: '',
      uuid: this.$route.query.uuid,
      userId: '',
      collectionAnnotationImages: null,
      annotationImages: [],
      initWidth: 0,
      initHeight: 0,
      initX: 0,
      initY: 0,
      isActive: 0,
      currentDeg: 0
    }
  },
  methods: {
    zoomTo4() {
      setTimeout(() => {
        this.$refs.openseadragon.zoomJumpTo(4)
      }, 1000)
    },
    // 图片旋转
    imagePinwheel(e) {
      this.currentDeg += 90
      this.$refs.IMAGE_SERVICE.style.transform = `rotate(${this.currentDeg}deg)`
    },
    pictureToolPanelShow(type) {
      if (type == 1) {
        this.isSlicePanelShow = !this.isSlicePanelShow
        this.isColorPanelShow = false
        this.isPencilPanelShow = false
        this.isSwitchPanelShow = false
      }
      if (type == 2) {
        this.isSlicePanelShow = false
        this.isColorPanelShow = false
        this.isSwitchPanelShow = false
        this.isPencilPanelShow = !this.isPencilPanelShow
      }
      if (type == 3) {
        this.isSlicePanelShow = false
        this.isColorPanelShow = !this.isColorPanelShow
        this.isPencilPanelShow = false
        this.isSwitchPanelShow = false
      }

      if (type == 4) {
        this.isSlicePanelShow = false
        this.isColorPanelShow = false
        this.isPencilPanelShow = false
        this.isSwitchPanelShow = !this.isSwitchPanelShow
      }
    },
    //对比度调节事件
    onContrastSlideChange(e) {
      this.coordinateColor.gama = 100
      this.coordinateColor.light = 50
      this.$refs.openseadragon.onContrastSlideChange(e)
    },
    //亮度调节事件
    onLightSlideInput(e) {
      this.coordinateColor.contrast = 100
      this.coordinateColor.gama = 100
      this.$refs.openseadragon.onLightSlideInput(e)
    },
    //gama调节事件
    onGamaSlideInput(e) {
      this.coordinateColor.contrast = 100
      this.coordinateColor.light = 50
      this.$refs.openseadragon.onGamaSlideInput(e)
    },
    //red调节事件
    onRedSlideInput(e) {},
    //yellow调节事件
    onYellowSlideInput(e) {},
    //blue调节事件
    onBlueSlideInput(e) {},
    __clearAllDrawingTools() {
      if (this.pencilActive) {
        this.pencilActive = false
        this.$refs.openseadragon.beginPencilDrawing(this.pencilActive)
      }
      if (this.polygonActive) {
        this.polygonActive = false
        this.$refs.openseadragon.beginPolygonDrawing(this.pencilActive)
      }
      if (this.rectangleActive) {
        this.rectangleActive = false
        this.$refs.openseadragon.beginRectangleDrawing(this.rectangleActive)
      }
      if (this.measureDistanceActive) {
        this.measureDistanceActive = false
        this.$refs.openseadragon.beginMeasuringDistance(this.measureDistanceActive)
      }
      if (this.measureAreaActive) {
        this.measureAreaActive = false
        this.$refs.openseadragon.beginMeasuringArea(this.measureAreaActive)
      }
    },
    togglePencil() {
      if (this.changeColor === 5) {
        this.changeColor = -1
        this.cancelAnn()
      } else {
        this.changeColor = 5
        this.__clearAllDrawingTools()
        this.pencilActive = !this.pencilActive
        if (this.pencilActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: '#b31a1a',
            name: '铅笔'
          })
        }
        this.$refs.openseadragon.beginPencilDrawing(this.pencilActive)
      }
    },
    toggleCircle() {
      if (this.changeColor === 21) {
        this.changeColor = -1
        this.cancelAnn()
      } else {
        this.changeColor = 21
        this.__clearAllDrawingTools()
        this.pencilActive = !this.pencilActive
        if (this.pencilActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: '#b31a1a',
            name: '圆形'
          })
        }
        this.$refs.openseadragon.beginCircleDrawing(this.pencilActive)
      }
    },
    togglePolygon() {
      if (this.changeColor === 7) {
        this.changeColor = -1
        this.cancelAnn()
      } else {
        this.changeColor = 7
        this.__clearAllDrawingTools()
        this.polygonActive = !this.polygonActive
        if (this.polygonActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: '#b31a1a',
            name: '铅笔'
          })
        }
        this.$refs.openseadragon.beginPolygonDrawing(this.polygonActive)
      }
    },
    toggleRectangle() {
      if (this.changeColor === 6) {
        this.changeColor = -1
        this.cancelAnn()
      } else {
        this.changeColor = 6
        this.__clearAllDrawingTools()
        this.rectangleActive = !this.rectangleActive
        if (this.rectangleActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: '#b31a1a',
            name: '矩形'
          })
        }

        this.$refs.openseadragon.beginRectangleDrawing(this.rectangleActive)
      }
    },
    toggleMeasureDistance() {
      if (this.changeColor === 9) {
        this.changeColor = -1
        this.__clearAllDrawingTools()
      } else {
        this.changeColor = 9
        this.__clearAllDrawingTools()
        this.measureDistanceActive = !this.measureDistanceActive
        this.$refs.openseadragon.beginMeasuringDistance(this.measureDistanceActive)
      }
    },
    toggleMeasureArea() {
      if (this.changeColor === 10) {
        this.changeColor = -1
        this.__clearAllDrawingTools()
      } else {
        this.changeColor = 10
        this.__clearAllDrawingTools()
        this.measureAreaActive = !this.measureAreaActive
        this.$refs.openseadragon.beginMeasuringArea(this.measureAreaActive)
      }
    },
    clearMeasure() {
      if (this.changeColor === 11) {
        this.changeColor = -1
      } else {
        this.changeColor = 11
        this.$refs.openseadragon.removeAllMeasureAnnotations()
        this.__clearAllDrawingTools()
        this.$refs.openseadragon.panToggle(true)
      }
    },
    goHome() {
      if (this.changeColor === 17) {
        this.changeColor = -1
      } else {
        this.changeColor = 17
        this.$refs.openseadragon.goHome()
      }
    },
    annotationSwitchButton() {
      if (this.changeColor24 === 24) {
        this.changeColor24 = -1
        this.annotationSwitchStatus = false
      } else {
        this.changeColor24 = 24
        this.annotationSwitchStatus = true
      }
    },
    switchLabel() {
      if (this.switchValue.patientId) {
        this.changeColor = -1
        this.switchValue.patientId = false
      } else {
        this.changeColor = 25
        this.switchValue.patientId = true
      }
    },
    hideCallout() {
      if (!this.ifhideCallout) {
        this.changeColor = 8
        this.ifhideCallout = true
        this.annotationsDataInit = []
      } else {
        this.ifhideCallout = false
        this.changeColor = -1
        this.annotationsDataInit = this.annotationsData
      }
    },
    rotateRight() {
      this.changeColor = 18
      if (this.viewerAngleCopy) {
        this.viewerAngle += this.viewerAngleCopy
      } else {
        this.viewerAngle += 5
      }
      this.viewerAngle %= 360
      this.$refs.openseadragon.setRotation(this.viewerAngle)
    },
    rotateLeft() {
      this.changeColor = 19
      if (this.viewerAngleCopy) {
        this.viewerAngle -= this.viewerAngleCopy
      } else {
        this.viewerAngle -= 5
      }
      this.viewerAngle %= 360
      this.$refs.openseadragon.setRotation(this.viewerAngle)
    },
    drawerAi() {
      if (!this.drawer) {
        this.changeColor = 12
        this.getAIAnnotations()
      } else {
        this.changeColor = -1
        this.aiAnnotationsData = []
        // AI定时器清除
        clearInterval(this.timer)
        this.timer = null
      }
    },
    analysisAI() {
      if (this.Ifanalysis) {
        this.Ifanalysis = false
        this.changeColor = -1
      } else {
        this.changeColor = 20
        this.Ifanalysis = true
      }
    },
    patienterListMethod() {
      this.changeColor = 2
      this.patienterList = true
    },
    DiagnosisListclosed() {
      this.patienterList = false
      this.changeColor = -1
    },
    patienterDetailMethod() {
      this.$store.commit('setUArgs', {
        consultationId: this.ordersId
      })
      this.changeColor = 4
      this.patienterDetail = true
      // 移除键盘监听事件
      const _this = this
      document.removeEventListener('keydown', _this.watchEnter)
    },
    patienterDetailclosed() {
      this.patienterDetail = false
      this.changeColor = -1
      // 加上键盘监听事件
      const _this = this
      document.addEventListener('keydown', _this.watchEnter)
    },
    selectStyle(item) {
      const _this = this
      this.$nextTick(function() {
        this.annotationsData.forEach(item1 => {
          _this.$set(item1, 'active', false)
        })
        this.$set(item, 'active', true)
      })
    },
    outStyle(item) {
      this.$set(item, 'active', false)
    },
    hotkeyMethods() {
      this.changeColor = 16
      this.hotkey = true
    },
    hotkeyclosed() {
      this.changeColor = -1
      this.hotkey = false
    },
    updateDiagnoseCollection(diagnosisId) {
      this.collectionDignosis.addOrUpdate(
        this.userId,
        {
          diagnosisId
        },
        true
      )
    },
    //获取强生图片宽高
    getImageInfo(filename) {
      this.$axios({
        method: 'GET',
        url: `${this.AnnotationsServiceURL}/images/info/${filename}`
      }).then(res => {
        if (res && res.data.code === 200) {
          const result = res.data.data
          this.imageInfo.height = result.imageHeight
          this.imageInfo.width = result.imageWidth
          this.imageInfo.maxLevel = result.maxLevel
          this.imageInfo.curScale = result.curScale
          this.tiles[0].height = result.tileHeight
          this.tiles[0].width = result.tileWidth

          this.openseadragonIsShow = true
        }
      })
    },
    getBiopsy(id) {
      let _this = this
      try {
        _this
          .$axios({
            method: 'GET',
            url: `/biopsy/browser/get/${id}`
          })
          .then(res => {
            // 请求失败
            if (res.data.code !== 200) {
              throw new Error(res.data)
            }
            // 请求成功
            const result = res.data.data
            _this.prevPathologyId = result.previousPathologyId
            _this.nextPathologyId = result.nextPathologyId
            _this.diagnosisId = result.id
            _this.biopsyList = result.biopsyList
            // 诊断详情
            _this.ordersId = id
            // 发送更新请求
            if (_this.collectionDignosis) {
              _this.updateDiagnoseCollection(_this.ordersId)
            }

            _this.info = `
        <span> <font color="#F56C6C"> ${result.name ? result.name : '暂无'} &nbsp&nbsp
        ${result.sexName ? result.sexName : '暂无'}&nbsp&nbsp
        ${result.age ? result.age : '暂无'}
        ${result.ageUnitName ? result.ageUnitName : '暂无'} </font> &nbsp&nbsp
        创建时间:${result.createTime ? result.createTime : '暂无'}&nbsp&nbsp
        </span>`
            // 通过切片获取标注
            if (id === _this.$route.query.ordersId) {
              result.biopsyList.forEach(element => {
                if (element.dziAddress === _this.$route.query.dzi) {
                  _this.getAnnotations(
                    element.id,
                    element.newFilename,
                    element.originFilename,
                    element.labelUrl
                  )
                  // 打开切片
                  // _this.$refs.openseadragon.open(
                  //   `${_this.pathologyServiceURL}${element.dziAddress}`
                  // )
                  _this.ifOpenseadragon = true
                }
              })
            } else if (id !== _this.$route.query.ordersId && result.biopsyList.length > 0) {
              // 诊断切换
              // 重新打开切片
              // _this.$refs.openseadragon.open(
              //   `${_this.pathologyServiceURL}${result.biopsyList[0].dziAddress}`
              // )
              // 重新获取标注
              _this.getAnnotations(
                result.biopsyList[0].id,
                result.biopsyList[0].newFilename,
                result.biopsyList[0].originFilename,
                result.biopsyList[0].labelUrl
              )
              _this.ifOpenseadragon = true
            } else {
              _this.ifOpenseadragon = false
              _this.labelUrl = ''
              _this.annotationsDataInit = []
              _this.annotationsData = []
              _this.$message.info('该诊断无切片')
            }
            //从上一页点哪个切片 切片浏览器哪张切片类是isActive  红框
            const index = _.findIndex(this.biopsyList, {
              id: this.biopsyId
            })
            this.isActive = index
          })
      } catch (e) {
        // 跳出
      }
    },
    // 获取标注 biopsyID切片Id 切片新名字 切片老名字 切片信息图片url
    getAnnotations(biopsyID, biopsyfileName, biopsyOriginFilename, labelUrl, index) {
      this.openseadragonIsShow = false
      this.biopsyId = biopsyID
      this.labelUrl = labelUrl
      // 重新打开切片
      let myFile = ''
      this.biopsyList.forEach(item => {
        if (item.id == biopsyID) {
          myFile = item.newFilename
        }
      })
      this.dziUrl = `${this.pathologyServiceURL}/images/${myFile}.dzi`
      const filename = biopsyfileName
      const isSdpc = filename.endsWith('sdpc')
      this.sourceType = isSdpc ? 'IIIF' : 'DZI'
      if (isSdpc) {
        this.getImageInfo(filename)
        this.newTimer = new Date().getTime()
      } else {
        this.newTimer = new Date().getTime()
        this.openseadragonIsShow = true
      }
      if (index || index == 0) {
        this.isActive = index
      } else {
        this.isActive == 0
      }
      this.ifOpenseadragon = true
      this.annotationsDataInit = []
      this.annotationsData = []

      // this.getAIAnnotations()

      if (biopsyfileName !== null && biopsyOriginFilename !== null) {
        this.biopsyOriginFilename = biopsyOriginFilename
        if (this.drawer) {
          // this.getAIAnnotations()
        }
      }

      // this.$axios({
      //   method: 'GET',
      //   url: `/biopsy/single/${biopsyID}`
      // }).then(resp => {
      //   // 请求失败
      //   if (resp.data.code !== 200) {
      //     throw new Error(resp.data)
      //   }
      //   // 请求成功
      //   // 数据处理
      //   resp.data.data.forEach(ele => {
      //     const temPoints = []
      //     const areaInfo = {
      //       width: ele.extraMessageJson ? (ele.extraMessageJson.width * 1000000).toFixed(3) : '',
      //       height: ele.extraMessageJson ? (ele.extraMessageJson.height * 1000000).toFixed(3) : '',
      //       area: ele.extraMessageJson
      //         ? (ele.extraMessageJson.area * 1000000 * 1000000).toFixed(3)
      //         : ''
      //     }
      //     ele.pointsJson.forEach(item => {
      //       const coord1 = ['points', item[0], item[1]]
      //       temPoints.push(coord1)
      //     })
      //     const object = {
      //       annotationId: ele.id,
      //       createAt: ele.createTime,
      //       saveUser: ele.createUserId,
      //       remarkOne: ele.remarkOne,
      //       remarkTwo: ele.remarkTwo,
      //       classToSet: {
      //         color: '#b31a1a',
      //         name: '胃癌'
      //       },
      //       points: temPoints,
      //       name: '胃癌',
      //       children: ele.childrenJson,
      //       show: true,
      //       saveUserName: ele.createUserName,
      //       type: 'polygon',
      //       imageUrl: this.ImageServiceURL + ele.imageUrl,
      //       extraMessageJson: ele.extraMessageJson,
      //       areaInfo
      //     }
      //     this.annotationsData.push(object)
      //     this.annotationsDataInit = _.cloneDeep(this.annotationsData)
      //   })
      //   //   this.collectionAnnotationImages.addOrUpdate(this.userId, {
      //   //     annotationsData: this.annotationsData,
      //   //   }, true);
      // })
    },
    annotationDrawingEnd(annotations) {
      if (this.annotationSwitchStatus == true) {
        this.annotationsWarn = true
      } else {
        this.annotationsWarn = false
        this.uploadPic(this.newPic)
      }
      annotations.forEach(temp => {
        if (!temp.show) {
          this.newannotations.push(temp)
        }
      })
    },
    aiAnnotationDrawingEnd(AIannotations) {
      if (AIannotations.length > 0) {
        this.AIdata = AIannotations
        this.drawer = true
      } else {
        this.drawer = false
      }
    },
    uploadAnnotation(annotation) {
      const { x, y, width, height } =
        annotation.option.type == 'circle' ? annotation.circlePath.bounds : annotation.path.bounds
      const imgURL = this.$refs.openseadragon.getImage(x, y, width, height)

      const MIME_TYPE = 'image/png'
      const dlLink = document.createElement('a')
      //   dlLink.download = '123.png';
      dlLink.href = imgURL
      this.newPic = dlLink
      dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':')

      document.body.appendChild(dlLink)
      //dlLink.click()
      document.body.removeChild(dlLink)
    },
    // 取消标注
    cancelAnn() {
      this.__clearAllDrawingTools()
      this.$refs.openseadragon.panToggle(true)
    },
    Submit() {
      this.annotationsWarn = false
      this.uploadPic(this.newPic)
    },
    // 提交标注
    submitAnnotation(uploadPictTemp) {
      const temp = this.newannotations[this.newannotations.length - 1]
      const pointsTmp = []
      const Annotationinfo = {
        minX: temp.data.minX,
        minY: temp.data.minY,
        pixelsWidth: temp.data.pixelsWidth,
        pixelsHeight: temp.data.pixelsHeight,
        pixelsArea: temp.data.pixelsArea,
        width: temp.data.width,
        height: temp.data.height,
        area: temp.data.area
      }
      temp.points.forEach(ele => {
        pointsTmp.push([ele.x, ele.y])
      })
      const postdata = {
        points: JSON.stringify(pointsTmp),
        children: JSON.stringify([]),
        diagnosisId: this.diagnosisId,
        imageUrl: uploadPictTemp,
        extraMessage: JSON.stringify(Annotationinfo),
        remarkOne: this.warning,
        remarkTwo: this.remark
      }
      try {
        this.$axios({
          method: 'post',
          url: `/biopsy/${this.biopsyId}/annotations`,
          data: postdata,
          headers: {
            'Content-Type': 'application/json',
            authorization: this.$store.state.authorization
          }
        }).then(
          res => {
            if (res && res.data.code === 200) {
              this.newannotations = []
              this.warning = ''
              this.remark = ''
              const areaInfo = {
                width: res.data.data.extraMessageJson
                  ? (res.data.data.extraMessageJson.width * 1000000).toFixed(3)
                  : '',
                height: res.data.data.extraMessageJson
                  ? (res.data.data.extraMessageJson.height * 1000000).toFixed(3)
                  : '',
                area: res.data.data.extraMessageJson
                  ? (res.data.data.extraMessageJson.area * 1000000 * 1000000).toFixed(3)
                  : ''
              }
              const temPoints = []
              res.data.data.pointsJson.forEach(item => {
                const coord1 = ['points', item[0], item[1]]
                temPoints.push(coord1)
              })
              const object = {
                annotationId: res.data.data.id,
                createAt: res.data.data.createTime,
                saveUser: res.data.data.createUserId,
                remarkOne: res.data.data.remarkOne,
                remarkTwo: res.data.data.remarkTwo,
                points: temPoints,
                classToSet: {
                  color: '#b31a1a',
                  name: '胃癌'
                },
                name: '胃癌',
                show: true,
                saveUserName: res.data.data.createUserName,
                type: 'polygon',
                imageUrl: this.ImageServiceURL + res.data.data.imageUrl,
                extraMessageJson: res.data.data.extraMessageJson,
                areaInfo
              }
              this.annotationsData.push(object)
              // this.collectionAnnotationImages.addOrUpdate(
              //   this.userId,
              //   {
              //     annotationsData: this.annotationsData
              //   },
              //   true
              // )
            }
          },
          err => {
            this.newannotations = []
            this.warning = ''
            this.remark = ''
            this.$message.info(`新增失败 ${err.response.data.message}`)
          }
        )
      } catch (e) {
        console.log('请求失败')
      }
    },
    // 上传切片图片
    uploadPic(imgBase) {
      try {
        const data1 = { imgBase64: imgBase.href }
        this.$axios({
          method: 'post',
          url: process.env.VUE_APP_ImageServiceURL + '/base/upload',
          data: qs.stringify(data1),
          headers: {
            defaultHeader: false,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(
          res => {
            if (res.data.status === 'success') {
              const uploadPictTemp = res.data.url.slice(res.data.url.indexOf('_') - 1)
              this.annotationImages.push(res.data.url)
              this.submitAnnotation(uploadPictTemp)
            }
          },
          err => {
            this.$message.info(`标注图新增失败${err.response.data}`)
          }
        )
      } catch (e) {
        console.log('请求失败')
      }
    },
    annotationsWarnCancel() {
      this.$refs.openseadragon.panToggle(true)
      const { id } = this.newannotations[this.newannotations.length - 1]
      this.$refs.openseadragon.removeAnnotation(id)
      this.annotationsWarn = false
    },
    // 全屏
    sreenFull() {
      if (
        !document.fullscreenElement &&
        !document.msFullscreenElement &&
        !document.mozFullScreenElement &&
        !document.webkitFullscreenElement
      ) {
        let docElm = document.documentElement
        this.changeColor = 15
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        } else if (docElm.msRequestFullscreen) {
          // IE
          docElm = document.body // overwrite the element (for IE)
          docElm.msRequestFullscreen()
        } else if (docElm.mozRequestFullScreen) {
          // 火狐
          docElm.mozRequestFullScreen()
        } else if (docElm.webkitRequestFullScreen) {
          // 谷歌
          docElm.webkitRequestFullScreen()
        }
      } else if (document.exitFullscreen) {
        this.changeColor = -1
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    },
    // 截图
    screenshot() {
      this.changeColor = 13
      $('#drawRectCanvas').show()
      const shadeCs1 = document.getElementById('shadeCanvas')
      const shadeContext1 = shadeCs1.getContext('2d')
      // 填充页面覆盖色
      shadeContext1.fillStyle = 'rgba(43, 42, 42, 0.5)'
      shadeContext1.fillRect(0, 0, shadeCs1.width, shadeCs1.height)
      $('#shadeCanvas').show()
      const color = 'white'
      const penWidth = 1
      const rectCanvas = document.getElementById('drawRectCanvas')
      // canvas 的矩形框
      const canvasRect = rectCanvas.getBoundingClientRect()
      // canvas 矩形框的左上角坐标
      const canvasLeft = canvasRect.left
      const canvasTop = canvasRect.top
      let lastWidth = 0
      let lastHeight = 0
      // 要画的矩形的起点 xy
      let width = 0
      let height = 0
      let x = 0
      let y = 0
      // 鼠标点击按下事件，画图准备
      rectCanvas.onmousedown = function(e) {
        // 设置遮罩层填充色
        const shadeCs = document.getElementById('shadeCanvas')
        const shadeContext = shadeCs.getContext('2d')
        // 确定起点
        x = e.clientX
        y = e.clientY
        // 添加layer
        $('#drawRectCanvas').addLayer({
          type: 'rectangle',
          strokeStyle: color,
          strokeWidth: penWidth,
          name: 'areaLayer',
          fromCenter: false,
          x,
          y,
          width: 1,
          height: 1
        })
        // 绘制
        $('#drawRectCanvas').drawLayers()
        $('#drawRectCanvas').saveCanvas()
        // 鼠标移动事件，画图
        // eslint-disable-next-line no-shadow
        rectCanvas.onmousemove = function(e) {
          lastWidth = width
          lastHeight = height
          // 要画的矩形的宽高
          width = e.clientX - canvasLeft - x
          height = e.clientY - canvasTop - y
          shadeContext.fillRect(x, y, lastWidth, lastHeight)
          // 清楚上一次鼠标移动画的框
          $('#drawRectCanvas').removeLayer('areaLayer')
          $('#drawRectCanvas').addLayer({
            type: 'rectangle',
            strokeStyle: color,
            strokeWidth: penWidth,
            name: 'areaLayer',
            fromCenter: false,
            x,
            y,
            width,
            height
          })
          $('#drawRectCanvas').drawLayers()
          shadeContext.clearRect(x, y, width, height)
        }
      }
      const that = this
      rectCanvas.onmouseup = function(e) {
        rectCanvas.onmousemove = null
        width = e.clientX - canvasLeft - x
        height = e.clientY - canvasTop - y
        $('#drawRectCanvas').removeLayer('areaLayer')
        $('#drawRectCanvas').addLayer({
          type: 'rectangle',
          strokeStyle: color,
          strokeWidth: penWidth,
          name: 'areaLayer',
          fromCenter: false,
          x,
          y,
          width,
          height
        })
        $('#drawRectCanvas').drawLayers()
        $('#drawRectCanvas').saveCanvas()
        $('#canvasToolbar').css('display', 'block')
        $('#canvasToolbar').css(
          'left',
          `${width > 0 ? x + width : Math.abs(width + x) + Math.abs(width)}px`
        )
        $('#canvasToolbar').css('top', `${height > 0 ? height + y : y}px`)
        $('#drawRectCanvas').hide()
        // 移除画的选取框
        $('#drawRectCanvas').removeLayer('areaLayer')
        // 隐藏画框的canvass
        $('#drawRectCanvas').hide()
        // 添加描述输入框
        const pr = $('#prescription')
        // 横向排列
        pr.css('display', 'flex') // 横向排列
        pr.css('justify-content', 'center') // 横向排列居中
        pr.css('z-index', 9999) // 浮动在最上层
        pr.css('position', 'absolute')
        pr.css('border', 'none') // 去掉边框
        pr.css('font-size', `${(Math.abs(width) / document.body.clientWidth) * 100}%`) // 文字大小
        pr.css('left', `${width > 0 ? x : Math.abs(width + x)}px`)
        pr.css('top', `${height > 0 ? height + y : y}px`)
        pr.css('width', `${Math.abs(width)}px`)
        $('#prescription').on('keydown', () => {
          if (e.keyCode === 27) {
            // $('#screenPC').trigger('click');
            $('#cancel').trigger('click')
          }
        })
        $('#SCinputBox').focus() // 描述输入框获取焦点
        // 重置描述框的内容viewZoomNumber
        $('#rate')[0].innerText = `倍率:${document.getElementById('viewZoomNumber').innerText}` // 倍率
        const nowDate = new Date()
        const year = nowDate.getFullYear()
        const month = `0${nowDate.getMonth() + 1}`.substr(-2, 2)
        const date = `0${nowDate.getDate()}`.substr(-2, 2)
        const hour = `0${nowDate.getHours()}`.substr(-2, 2)
        const minute = `0${nowDate.getMinutes()}`.substr(-2, 2)
        const second = `0${nowDate.getSeconds()}`.substr(-2, 2)
        $('#screenshotTime')[0].innerText = `${year}-${month}-${date} ${hour}:${minute}:${second}` // 截屏时间
        $('#SCinputBox')[0].innerText = '' // 输入框内容置空
        // 重置信息框样式框的内容
        $('#rate').css('width', '100%')
        $('#screenshotTime').css('width', '100%')
        // 判断倍率框或者日期框的字数超过1行，则重新布局
        // eslint-disable-next-line radix
        if (
          Math.ceil(
            $('#rate').height() /
              parseInt(
                $('#rate')
                  .css('line-height')
                  .replace('px', '')
              )
          ) > 1 ||
          Math.ceil(
            $('#screenshotTime')
              // eslint-disable-next-line radix
              .height() /
              parseInt(
                $('#screenshotTime')
                  .css('line-height')
                  .replace('px', '')
              )
          ) > 1
        ) {
          pr.css('display', '')
          pr.css('justify-content', '')
        } else {
          $('#rate').css('width', '300px')
          $('#screenshotTime').css('width', '500px')
        }
        // 鼠标抬起
        that.initWidth = width
        that.initHeight = height
        that.initX = x
        that.initY = y
      }
    },
    clipImage(x, y, width, height) {
      html2canvas(document.querySelector('body')).then(canvas => {
        const scale = window.devicePixelRatio
        const clipCanvas = document.createElement('canvas')
        clipCanvas.width = width * scale
        clipCanvas.height = height * scale
        const context = clipCanvas.getContext('2d')
        context.scale(1 / scale, 1 / scale)
        context.drawImage(
          canvas,
          x * scale,
          y * scale,
          width * scale,
          height * scale,
          0,
          0,
          width * scale,
          height * scale
        )
        const clipedImageBase64 = clipCanvas.toDataURL()
        const img = document.createElement('a')
        img.href = clipedImageBase64
        img.download = 'pathology.jpg'
        img.click()
      })
    },
    sSuccess() {
      $('#canvasToolbar').css('display', 'none')
      const captureX = this.initWidth > 0 ? this.initX : Math.abs(this.initX + this.initWidth)
      const captureY = this.initHeight > 0 ? this.initY : Math.abs(this.initY + this.initHeight)
      this.clipImage(
        captureX,
        captureY,
        Math.abs(this.initWidth),
        Math.abs(this.initHeight) + $('#prescription').height()
      )
      const shadeCs = document.getElementById('shadeCanvas')
      const shadeContext = shadeCs.getContext('2d')
      shadeContext.clearRect(0, 0, shadeCs.width, shadeCs.height)
      $('#shadeCanvas').hide()
      $('#prescription').css('display', 'none')
      this.changeColor = -1
    },
    sCancel() {
      $('#canvasToolbar').css('display', 'none')
      const shadeCs = document.getElementById('shadeCanvas')
      const shadeContext = shadeCs.getContext('2d')
      shadeContext.clearRect(0, 0, shadeCs.width, shadeCs.height)
      $('#shadeCanvas').hide()
      $('#prescription').css('display', 'none')
      // 加上键盘监听事件
      this.changeColor = -1
    },
    // 子组件AlFlaoting 调用
    jumpTo(val) {
      this.$refs.openseadragon.jumpToArea(
        val.data.minX,
        val.data.minY,
        val.data.minX + val.data.pixelsWidth,
        val.data.minY + val.data.pixelsHeight
      )
      // AI标注闪烁
      const annotation = _.find(this.AIdata, { id: val.id })
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = null
      this.flag = true
      if (!this.timerOne) {
        this.timerOne = setInterval(() => {
          this.AnnotationOpacity(annotation)
        }, 150)
      }
      this.timer = setTimeout(() => {
        clearInterval(this.timerOne)
        this.timerOne = null
      }, 600)
    },
    togglePencilLine() {
      if (this.changeColor === 22) {
        this.changeColor = -1
        this.cancelAnn()
      } else {
        this.changeColor = 22
        this.__clearAllDrawingTools()
        this.pencilActive = !this.pencilActive
        if (this.pencilActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: '#b31a1a',
            name: '涂抹'
          })
        }
        this.$refs.openseadragon.beginPencilLineDrawing(this.pencilActive)
      }
    },
    toggleArrow() {
      if (this.changeColor === 23) {
        this.changeColor = -1
        this.cancelAnn()
      } else {
        this.changeColor = 23
        this.__clearAllDrawingTools()
        this.pencilActive = !this.pencilActive
        if (this.pencilActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: '#b31a1a',
            name: '箭头'
          })
        }
        this.$refs.openseadragon.beginArrowDrawing(this.pencilActive)
      }
    },
    togglePencil() {
      if (this.changeColor === 5) {
        this.changeColor = -1
        this.cancelAnn()
      } else {
        this.changeColor = 5
        this.__clearAllDrawingTools()
        this.pencilActive = !this.pencilActive
        if (this.pencilActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: '#b31a1a',
            name: '铅笔'
          })
        }
        this.$refs.openseadragon.beginPencilDrawing(this.pencilActive)
      }
    },
    // AI标注闪烁
    AnnotationOpacity(Annotation) {
      if (this.flag) {
        Annotation.setOpacity(0)
        this.flag = false
      } else {
        Annotation.setOpacity(1)
        this.flag = true
      }
    },
    // 获取AI标注
    getAIAnnotations() {
      const c = this.biopsyOriginFilename.indexOf('.')
      const name = this.biopsyOriginFilename.substring(0, c)
      try {
        this.aiAnnotationsData = []
        this.$axios({
          method: 'GET',
          url: `${this.pathologyServiceURL}/annotations/results/${name}`
        }).then(
          res => {
            if (res.data.code === 200) {
              // 数据处理
              let i = 1
              res.data.data.annotations.forEach(ele => {
                const temPoints = []
                ele.points.forEach(item => {
                  const coord1 = ['points', item[0], item[1]]
                  temPoints.push(coord1)
                })
                const object = {
                  annotationId: i++,
                  classToSet: {
                    color: '#266EFF',
                    name: '人工智能'
                  },
                  points: temPoints,
                  name: '人工智能结果1',
                  show: true,
                  type: ele.type
                }
                this.aiAnnotationsData.push(object)
              })
            } else {
              this.$message.info('暂无AI标注数据')
            }
          },
          err => {
            this.$message.info(`请求错误${err.data}`)
          }
        )
      } catch (e) {
        // 跳出
        console.log('请求错误')
      }
    },
    mouseover() {
      this.styleObject = {
        cursor: 'pointer',
        position: 'relative',
        isDisplay: 'inline',
        width: '200px'
      }
    },
    mouseout() {
      this.styleObject = {
        cursor: 'pointer',
        position: 'relative',
        isDisplay: 'inline',
        width: '200px',
        left: '-100px'
      }
    },
    viewZoom(data) {
      this.viewZoomNumber = data.toFixed(2)
    },
    handleClose() {
      this.warning = ''
      this.remark = ''
    },
    updateAnnotation(annotation) {
      this.warning = annotation.remarkOne
      this.remark = annotation.remarkTwo
      this.updateAnnInfo.area = annotation.areaInfo.area
      this.updateAnnInfo.width = annotation.areaInfo.width
      this.updateAnnInfo.height = annotation.areaInfo.height
      this.updateAnnInfo.saveUserName = annotation.saveUserName
      this.updateAnnInfo.createAt = annotation.createAt
      this.updateAnnInfo.annotationId = annotation.annotationId
      this.annDialogVisible = true
      this.$refs.openseadragon.jumpToArea(
        annotation.extraMessageJson.minX,
        annotation.extraMessageJson.minY,
        annotation.extraMessageJson.minX + annotation.extraMessageJson.pixelsWidth,
        annotation.extraMessageJson.minY + annotation.extraMessageJson.pixelsHeight
      )
    },
    updateAnnSubmit(annotationId) {
      const submitInfo = { remarkOne: this.warning, remarkTwo: this.remark }
      try {
        this.$axios({
          method: 'put',
          url: `/biopsy/${this.biopsyId}/annotations/${annotationId}`,
          data: submitInfo,
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(
          res => {
            if (res && res.data.code === 200) {
              this.$message.success('更新成功')
              this.getAnnotations(this.biopsyId, null, null, null)
              this.remark = ''
            }
          },
          err => {
            this.$message.info(`更新失败  ${err.response.data.message}`)
          }
        )
      } catch (e) {
        console.log(`请求失败  ${e}`)
      }
      this.annDialogVisible = false
    },
    deleteAnnotation(annotationId) {
      this.$confirm('此操作将永久删除该标注, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          try {
            this.$axios({
              method: 'delete',
              url: `/biopsy/${this.biopsyId}/annotations/${annotationId}`,
              data: {}
            }).then(
              res => {
                if (res && res.data.code === 200) {
                  this.$message.info('删除成功')
                  this.getAnnotations(this.biopsyId, null, null, null)
                } else {
                  this.$message.info(res.data.message)
                }
              },
              err => {
                this.$message.info(`删除失败  ${err.response.data.message}`)
              }
            )
          } catch (e) {
            console.log('请求失败')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    findTagName() {
      const x = document.activeElement.tagName
      const _this = this
      if (x === 'INPUT' || x === 'TEXTAREA' || document.activeElement.id === 'SCinputBox') {
        document.removeEventListener('keydown', _this.watchEnter)
      } else {
        document.addEventListener('keydown', _this.watchEnter)
      }
    },
    diagnosisLast() {
      if (this.prevPathologyId) {
        this.getBiopsy(this.prevPathologyId)
      } else {
        this.$message.info('上一个诊断无数据')
      }
    },
    diagnosisNext() {
      if (this.nextPathologyId) {
        this.getBiopsy(this.nextPathologyId)
      } else {
        this.$message.info('下一个诊断无数据')
      }
    },
    // 监听回车按钮事件
    watchEnter(e) {
      const keyNum = window.event ? e.keyCode : e.which // 获取被按下的键值
      // 判断如果用户按下了回车键（keycody=13）
      if (keyNum === 13) {
        console.log('dayin')
      }
      if (keyNum === 112) {
        if (this.patienterList) {
          this.patienterList = false
        } else {
          this.patienterListMethod()
        }
        e.preventDefault()
      }
      if (keyNum === 113) {
        if (this.patienterDetail) {
          this.patienterDetail = false
        } else {
          this.patienterDetailMethod()
        }
        e.preventDefault()
      }
      if (keyNum === 49) {
        this.$refs.openseadragon.zoomJumpTo(40)
      }
      if (keyNum === 50) {
        this.$refs.openseadragon.zoomJumpTo(20)
      }
      if (keyNum === 51) {
        this.$refs.openseadragon.zoomJumpTo(10)
      }
      if (keyNum === 52) {
        this.$refs.openseadragon.zoomJumpTo(4)
      }
      if (keyNum === 53) {
        this.$refs.openseadragon.zoomJumpTo(2)
      }
      if (keyNum === 54) {
        this.$refs.openseadragon.zoomJumpTo(1)
      }
      if (keyNum === 32) {
        this.$refs.openseadragon.ifMove()
      }
      if (keyNum === 114) {
        e.preventDefault()
        this.drawerAi()
      }
      if (keyNum === 69) {
        this.rotateRight()
      }
      if (keyNum === 81) {
        this.rotateLeft()
      }
      if (keyNum === 79) {
        this.goHome()
      }
      if (keyNum === 122) {
        this.sreenFull()
      }
      if (keyNum === 123) {
        if (this.hotkey) {
          this.hotkey = false
        } else {
          this.hotkeyMethods()
          e.preventDefault()
        }
      }
      if (keyNum === 72) {
        if (this.showleftPic) {
          this.showleftPic = false
        } else {
          this.showleftPic = true
        }
      }
      if (keyNum === 27) {
        this.newannotations = []
        this.warning = ''
        this.remark = ''
        this.changeColor = -1
        this.__clearAllDrawingTools()
        this.$refs.openseadragon.panToggle(true)
      }
      if (keyNum === 9) {
        const index = _.findIndex(this.biopsyList, { id: this.biopsyId })
        if (index < this.biopsyList.length - 1) {
          this.getAnnotations(
            this.biopsyList[index + 1].id,
            this.biopsyList[index + 1].newFilename,
            this.biopsyList[index + 1].originFilename,
            this.biopsyList[index + 1].labelUrl
          )
        } else {
          this.getAnnotations(
            this.biopsyList[0].id,
            this.biopsyList[0].newFilename,
            this.biopsyList[0].originFilename,
            this.biopsyList[0].labelUrl
          )
        }
      }
    }
  },
  // 在beforeDestroy()生命周期内清除定时器：
  beforeDestroy() {
    clearInterval(this.timer)
    this.timerOne = null
    this.timer = null
    // 移除监听回车按键
    const _this = this
    document.removeEventListener('keydown', _this.watchEnter)
  },
  computed: {
    // dziUrl() {
    //   return `${this.pathologyServiceURL + this.$route.query.dzi}`
    // },
    switchValueScale() {
      return this.switchValue.scale
    },
    switchValueZoom() {
      return this.switchValue.zoom
    },
    switchValueMarkLabel() {
      return this.switchValue.markLabel
    },
    switchValueAIAnalysis() {
      return this.switchValue.AIAnalysis
    },
    switchValuePatientId() {
      return this.switchValue.patientId
    },
    switchValueNavigator() {
      return this.switchValue.navigator
    },
    switchValueDisc() {
      return this.switchValue.disc
    },
    switchValueNet() {
      return this.switchValue.net
    }
  },
  watch: {
    switchValueScale(val) {
      let _this = this
      if (val) {
        _this.$refs.openseadragon.viewer.scalebar({
          pixelsPerMeter: _this.$refs.openseadragon.pixelsPerMeter
        })
      } else {
        _this.$refs.openseadragon.viewer.scalebar({
          pixelsPerMeter: null
        })
      }
    },
    switchValueZoom(val) {
      let _this = this
      _this.$refs.openseadragon.zoomSliderShow = val
    },
    switchValueDisc(val) {
      let _this = this
      _this.$refs.openseadragon.discShow = val
    },
    switchValueMarkLabel(val) {
      this.ifhideCallout = val
      this.hideCallout()
    },
    switchValueAIAnalysis(val) {
      this.drawerAi()
    },
    //done
    switchValuePatientId(val) {
      //this.value = val;
    },
    switchValueNavigator(val) {
      let _this = this
      _this.$refs.openseadragon.viewer.showNavigator = val
    },
    switchValueNet(val) {
      let _this = this
      if (val) {
        _this.$refs.openseadragon.startDrawingGrid()
      } else {
        _this.$refs.openseadragon.stopDrawingGrid()
      }
    }
  },
  mounted() {
    // if (this.$store.state.permissionList[0].permissionList[0].code == 'user-workflow') {
    //   this.userLogin = false
    //   console.log(this.userLogin)
    // }
    // this.wbClient = new Client(process.env.WEBSORKET_URL);
    // this.collectionDignosis = this.wbClient.subscribe('diagnosis');
    // this.collectionDignosis.addObserve(this.$route.query.userId, (data) => {
    //   console.log('observe', 'diagnosis', this.$route.query.userId, data);
    //   if (this.pathologyId !== data.diagnosisId) {
    //     this.getBiopsy(data.diagnosisId);
    //   }
    // });
    // this.collectionAnnotationImages = this.wbClient.subscribe('annotations');
    // 验证用户登陆,登陆后才能操作
    jcanvasFactory($, window)
    this.getBiopsy(this.uuid)

    // this.getBiopsy();
    //     this.$store.commit('setPropertyGeneral', {
    //     key: 'authorization',
    //     value: this.$route.query.authorization,
    // });
    // this.zoomTo4()
    // const angle = this.$refs.openseadragon.getRotation()
    // if (angle) {
    //   this.viewerAngle = angle
    // }
    this.$store.commit('setPropertyGeneral', {
      key: 'authorization',
      value: this.$route.query.authorization
    })

    const { clientWidth } = document.body
    const { clientHeight } = document.body
    // 更新canvas宽高
    $('#drawRectCanvas').attr('width', clientWidth)
    $('#drawRectCanvas').attr('height', clientHeight)
    $('#shadeCanvas').attr('width', clientWidth)
    $('#shadeCanvas').attr('height', clientHeight)
    $('#shadeCanvas').hide()
    $('#drawRectCanvas').hide()
  },
  destroyed() {
    console.log('destroyed')
    //this.wbClient.close()
  }
}
</script>

<style scoped>
.overlay {
  position: absolute !important;
  background-color: #0b1c2e;
  bottom: 0;
  right: 0;
  width: 40px;
  /* line-height: 50px; */
  z-index: 1;
}

.divCoordinateColor {
  position: absolute !important;
  background-color: #0b1c2e;
  border-radius: 20px;
  padding: 15px 25px 15px 15px;
  /* top: 267px; */
  bottom: 167px;
  right: 45px;
  width: 270px;
  z-index: 4;
}

.divPictureHandle {
  position: absolute !important;
  background-color: #0b1c2e;
  border-radius: 20px;
  padding: 15px;
  /* top: 227px; */
  bottom: 127px;
  right: 45px;
  width: 80px;
  z-index: 4;
}

.divMarkLabelHandle {
  position: absolute !important;
  background-color: #0b1c2e;
  border-radius: 20px;
  padding: 15px;
  /* top: 190px; */
  bottom: 90px;
  right: 45px;
  width: 80px;
  z-index: 4;
}

.divSettingSwitch {
  position: absolute !important;
  background-color: #0b1c2e;
  border-radius: 20px;
  padding: 15px;
  /* top: 300px; */
  bottom: 100px;
  right: 45px;
  width: 110px;
  z-index: 4;
}

.openSeadragon {
  position: relative;
  top: 45px;
  height: 95%;
}

.tool-bar1 {
  float: left;
  cursor: pointer;
  color: #fff;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 5px;
  width: 100%;
  display: flex;
  align-items: center;
}

.tool-bar3 {
  float: left;
  cursor: pointer;
  color: #fff;
  padding-left: 5px;
  padding-bottom: 10px;
  padding-top: 5px;
  width: 100%;
  display: flex;
  align-items: center;
}

.tool-bar2 {
  float: left;
  text-align: center;
  cursor: pointer;
  color: #fff;
  padding-bottom: 10px;
  padding-top: 5px;
  width: 39px;
}

.tool-bar-degree {
  float: left;
  text-align: center;
  cursor: pointer;
  color: #fff;
  padding-right: 3px;
  padding-top: 3px;
}

.cut-line {
  display: inline;
  float: left;
  margin-right: 1.3%;
  background: #cccccc;
  width: 100%;
  height: 1px;
  display: flex;
  align-items: center;
  text-align: center;
}

.red {
  color: #12945c;
}

.dialog {
  width: 65%;
  height: 130px;
  margin-bottom: 2%;
  position: absolute;
  bottom: 1px;
  left: 17%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
  overflow-x: auto;
  border-top-right-radius: 18px;
  border-top-left-radius: 18px;
}

.liImg {
  width: 80px;
  height: 80px;
  float: left;
  margin-right: 10px;
  position: relative;
}

ul li {
  list-style: none;
}

ul {
  overflow: hidden;
}

li {
  float: left;
}

.active {
  box-shadow: 0px 0px 3px 2px #808080;
  /* width: 200px; */
  background-color: rgba(102, 102, 102, 0.3);
  color: #fafafa;
  z-index: 1;
  position: fixed;
  /* bottom: 200px; */
  border-radius: 5px;
  /* padding: 10px; */
}

.leftPic {
  top: 50px;
  border: 0px;
  padding: 0px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  touch-action: none;
  opacity: 0.8;
  z-index: 1;
  height: 70%;
}
.leftPic img {
  width: 200px;
}

.rightLable {
  position: fixed;
  top: 46px;
  right: 0;
  opacity: 0.8;
  z-index: 1;
}

.right-lable-img {
  height: 95px;
  width: 201px;
}

.keyword {
  font-size: 12px;
  color: #f78989;
  margin-left: 21px;
  position: absolute;
  top: 5px;
}

.F3info {
  width: 65%;
  line-height: 30px;
  height: 30px;
  position: absolute;
  bottom: 30px;
  left: 17%;
  z-index: 1;
}

.updateInfo {
  box-shadow: 0px 0px 3px 2px #808080;
  width: 200px;
  background-color: rgba(102, 102, 102, 0.3);
  color: #fafafa;
  z-index: 12;
  margin-left: 19%;
  position: fixed;
  bottom: 200px;
  border-radius: 5px;
}

.annPicUserName {
  position: absolute;
  top: 80px;
  left: 0;
  width: 80px;
  color: #fafafa;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#drawRectCanvas {
  position: absolute;
  z-index: 500;
  left: 0;
  top: 0;
  cursor: crosshair;
}

#shadeCanvas {
  position: absolute;
  z-index: 250;
  left: 0;
  top: 0;
}

#canvasToolbar {
  width: 104px;
  position: absolute;
  z-index: 1000;
  display: none;
  height: 26px;
  background: white;
}

#canvasToolbar .error {
  color: rgb(232, 30, 53);
  font-size: 13px;
}

#canvasToolbar .check {
  font-size: 13px;
  margin-right: 5px;
  color: rgb(73, 203, 95);
}

#canvasToolbar .canvasButton {
  margin-left: 1px;
  margin-top: 3px;
  cursor: pointer;
  width: 50px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  float: left;
}

#canvasToolbar .canvasButton:hover {
  border: 1px solid #ccc;
}

.colorStatus {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

.greenStatus {
  background-color: green;
}

.redStatus {
  background-color: red;
}

.greyStatus {
  background-color: grey;
}

.yesActive {
  margin-bottom: 2%;
  border: solid 3px red;
  cursor: pointer;
  position: relative;
  width: 200px;
}

.noActive {
  margin-bottom: 2%;
  border: solid 1px green;
  cursor: pointer;
  position: relative;
  width: 200px;
}

.tool-copy {
  position: absolute;
  top: 5px;
  right: 0px;
  width: 685px;
  height: 30px;
  z-index: 1111;
}

.tool-bar2-copy {
  position: relative;
  float: left;
  text-align: center;
  cursor: pointer;
  color: #266eff;
  margin: 5px;
  border-radius: 5px;
  line-height: 25px;
}

.red {
  color: #fff;
  background-color: #10a1df;
}

@media only screen and (max-width: 1000px) {
  .rightLable {
    position: absolute;
    top: 15%;
    right: 0px;
    z-index: 1;
  }

  .right-lable-img {
    height: 48px;
    width: 100px;
  }
  .tool-copy {
    width: 450px;
  }
  .leftPic img {
    width: 100px;
  }
}
</style>
